
<div class='row' id='content-wrapper'>
	<div class='col-xs-12 wigetdrapdrop'>
		<div class='row'>
			<div class='col-sm-12'>
				<div class='page-header'>
					<h1 class='pull-left'>
						<i class='icon-edit'></i> <span>Forms components</span>
					</h1>
					<div class='pull-right'>
						<ul class='breadcrumb'>
							<li><a href='index.html'> <i class='icon-bar-chart'></i>
							</a></li>
							<li class='separator'><i class='icon-angle-right'></i></li>
							<li>Forms</li>
							<li class='separator'><i class='icon-angle-right'></i></li>
							<li class='active'>Form components</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class='row'>
			<div class='col-sm-8'>
				<div class='box bordered-box blue-border'>
					<div class='box-header blue-background'>
						<div class='title'>Select 2</div>
						<div class='actions'>
							<a class="btn box-remove btn-xs btn-link" href="#"><i
								class='icon-remove'></i> </a> <a
								class="btn box-collapse btn-xs btn-link" href="#"><i></i> </a>
						</div>
					</div>
					<div class='box-content'>
						<div class='row'>
							<div class='col-sm-6'>
								<p>
									<strong>Classic select</strong>
								</p>
								<select class='select2 form-control'>
									<optgroup label='Alaskan/Hawaiian Time Zone'>
										<option value='AK'>Alaska</option>
										<option value='HI'>Hawaii</option>
									</optgroup>
									<optgroup label='Pacific Time Zone'>
										<option value='CA'>California</option>
										<option value='NV'>Nevada</option>
										<option value='OR'>Oregon</option>
										<option value='WA'>Washington</option>
									</optgroup>
									<optgroup label='Mountain Time Zone'>
										<option value='AZ'>Arizona</option>
										<option value='CO'>Colorado</option>
										<option value='ID'>Idaho</option>
										<option value='MT'>Montana</option>
										<option value='NE'>Nebraska</option>
										<option value='NM'>New Mexico</option>
										<option value='ND'>North Dakota</option>
										<option value='UT'>Utah</option>
										<option value='WY'>Wyoming</option>
									</optgroup>
									<optgroup label='Central Time Zone'>
										<option value='AL'>Alabama</option>
										<option value='AR'>Arkansas</option>
										<option value='IL'>Illinois</option>
										<option value='IA'>Iowa</option>
										<option value='KS'>Kansas</option>
										<option value='KY'>Kentucky</option>
										<option value='LA'>Louisiana</option>
										<option value='MN'>Minnesota</option>
										<option value='MS'>Mississippi</option>
										<option value='MO'>Missouri</option>
										<option value='OK'>Oklahoma</option>
										<option value='SD'>South Dakota</option>
										<option value='TX'>Texas</option>
										<option value='TN'>Tennessee</option>
										<option value='WI'>Wisconsin</option>
									</optgroup>
									<optgroup label='Eastern Time Zone'>
										<option value='CT'>Connecticut</option>
										<option value='DE'>Delaware</option>
										<option value='FL'>Florida</option>
										<option value='GA'>Georgia</option>
										<option value='IN'>Indiana</option>
										<option value='ME'>Maine</option>
										<option value='MD'>Maryland</option>
										<option value='MA'>Massachusetts</option>
										<option value='MI'>Michigan</option>
										<option value='NH'>New Hampshire</option>
										<option value='NJ'>New Jersey</option>
										<option value='NY'>New York</option>
										<option value='NC'>North Carolina</option>
										<option value='OH'>Ohio</option>
										<option value='PA'>Pennsylvania</option>
										<option value='RI'>Rhode Island</option>
										<option value='SC'>South Carolina</option>
										<option value='VT'>Vermont</option>
										<option value='VA'>Virginia</option>
										<option value='WV'>West Virginia</option>
									</optgroup>
								</select>
							</div>
							<div class='col-sm-6'>
								<p>
									<strong>Multiple select</strong>
								</p>
								<select class='select2 form-control' multiple
									placeholder='Try typing some USA country name'>
									<optgroup label='Alaskan/Hawaiian Time Zone'>
										<option value='AK'>Alaska</option>
										<option value='HI'>Hawaii</option>
									</optgroup>
									<optgroup label='Pacific Time Zone'>
										<option value='CA'>California</option>
										<option value='NV'>Nevada</option>
										<option value='OR'>Oregon</option>
										<option value='WA'>Washington</option>
									</optgroup>
									<optgroup label='Mountain Time Zone'>
										<option value='AZ'>Arizona</option>
										<option value='CO'>Colorado</option>
										<option value='ID'>Idaho</option>
										<option value='MT'>Montana</option>
										<option value='NE'>Nebraska</option>
										<option value='NM'>New Mexico</option>
										<option value='ND'>North Dakota</option>
										<option value='UT'>Utah</option>
										<option value='WY'>Wyoming</option>
									</optgroup>
									<optgroup label='Central Time Zone'>
										<option value='AL'>Alabama</option>
										<option value='AR'>Arkansas</option>
										<option value='IL'>Illinois</option>
										<option value='IA'>Iowa</option>
										<option value='KS'>Kansas</option>
										<option value='KY'>Kentucky</option>
										<option value='LA'>Louisiana</option>
										<option value='MN'>Minnesota</option>
										<option value='MS'>Mississippi</option>
										<option value='MO'>Missouri</option>
										<option value='OK'>Oklahoma</option>
										<option value='SD'>South Dakota</option>
										<option value='TX'>Texas</option>
										<option value='TN'>Tennessee</option>
										<option value='WI'>Wisconsin</option>
									</optgroup>
									<optgroup label='Eastern Time Zone'>
										<option value='CT'>Connecticut</option>
										<option value='DE'>Delaware</option>
										<option value='FL'>Florida</option>
										<option value='GA'>Georgia</option>
										<option value='IN'>Indiana</option>
										<option value='ME'>Maine</option>
										<option value='MD'>Maryland</option>
										<option value='MA'>Massachusetts</option>
										<option value='MI'>Michigan</option>
										<option value='NH'>New Hampshire</option>
										<option value='NJ'>New Jersey</option>
										<option value='NY'>New York</option>
										<option value='NC'>North Carolina</option>
										<option value='OH'>Ohio</option>
										<option value='PA'>Pennsylvania</option>
										<option value='RI'>Rhode Island</option>
										<option value='SC'>South Carolina</option>
										<option value='VT'>Vermont</option>
										<option value='VA'>Virginia</option>
										<option value='WV'>West Virginia</option>
									</optgroup>
								</select>
							</div>
						</div>
						<hr class='hr-normal'>
						<div class='row'>
							<div class='col-sm-6'>
								<p>
									<strong>With HTML in option</strong>
								</p>
								<select class='form-control' id='select2-icon'>
									<option value='icon-heart'>icon-heart</option>
									<option value='icon-home'>icon-home</option>
									<option value='icon-resize-full'>icon-resize-full</option>
								</select>
							</div>
							<div class='col-sm-6'>
								<p>
									<strong>Tags</strong>
								</p>
								<div class='form-control' id='select2-tags'></div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class='col-sm-4'>
				<div class='box bordered-box blue-border box-nomargin'>
					<div class='box-header green-background'>
						<div class='title'>Color pickers</div>
						<div class='actions'>
							<a class="btn box-remove btn-xs btn-link" href="#"><i
								class='icon-remove'></i> </a> <a
								class="btn box-collapse btn-xs btn-link" href="#"><i></i> </a>
						</div>
					</div>
					<div class='box-content'>
						<p>
							<strong>HEX</strong>
						</p>
						<input class='colorpicker-hex form-control'
							placeholder='Pick a color' style='margin-bottom: 0;' type='text'>
						<hr class='hr-normal'>
						<p>
							<strong>RGB</strong>
						</p>
						<input class='colorpicker-rgb form-control'
							placeholder='Pick a color' style='margin-bottom: 0;' type='text'>
					</div>
				</div>
			</div>
		</div>
		<div class='group-header'>
			<div class='row'>
				<div class='col-sm-6 col-sm-offset-3'>
					<div class='text-center'>
						<h2>Usefull features</h2>
						<small class='text-muted'>Very userfull features for
							better user experience.</small>
					</div>
				</div>
			</div>
		</div>
		<div class='row'>
			<div class='col-sm-4'>
				<div class='box bordered-box blue-border box-nomargin'>
					<div class='box-header red-background'>
						<div class='title'>Datetime pickers</div>
						<div class='actions'>
							<a class="btn box-remove btn-xs btn-link" href="#"><i
								class='icon-remove'></i> </a> <a
								class="btn box-collapse btn-xs btn-link" href="#"><i></i> </a>
						</div>
					</div>
					<div class='box-content'>
						<p>
							<strong>Daterangepicker</strong>
						</p>
						<div>
							<div class='input-group'>
								<input class='form-control daterange'
									placeholder='Select daterange' type='text'> <span
									class='input-group-addon' id='daterange2'> <i
									class='icon-calendar'></i>
								</span>
							</div>
						</div>
						<hr class='hr-normal'>
						<p>
							<strong>Datepicker</strong>
						</p>
						<div>
							<div class='datepicker input-group' id='datepicker'>
								<input class='form-control' data-format='yyyy-MM-dd'
									placeholder='Select datepicker' type='text'> <span
									class='input-group-addon'> <span
									data-date-icon='icon-calendar' data-time-icon='icon-time'></span>
								</span>
							</div>
						</div>
						<hr class='hr-normal'>
						<p>
							<strong>Timepicker</strong>
						</p>
						<div>
							<div class='timepicker input-group' id='timepicker'>
								<input class='form-control' data-format='hh:mm:ss'
									placeholder='Select timepicker' type='text'> <span
									class='input-group-addon'> <span
									data-date-icon='icon-calendar' data-time-icon='icon-time'></span>
								</span>
							</div>
						</div>
						<hr class='hr-normal'>
						<p>
							<strong>Datetimepicker</strong>
						</p>
						<div>
							<div class='datetimepicker input-group' id='datetimepicker'>
								<input class='form-control' data-format='MM/dd/yyyy HH:mm:ss PP'
									placeholder='Select timepicker' type='text'> <span
									class='input-group-addon'> <span
									data-date-icon='icon-calendar' data-time-icon='icon-time'></span>
								</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class='col-sm-4'>
				<div class='box box-nomargin'>
					<div class='box-header orange-background'>
						<div class='title'>Masked inputs</div>
						<div class='actions'>
							<a class="btn box-remove btn-xs btn-link" href="#"><i
								class='icon-remove'></i> </a> <a
								class="btn box-collapse btn-xs btn-link" href="#"><i></i> </a>
						</div>
					</div>
					<div class='box-content'>
						<p>
							<strong>Phone (+999 999 999 999)</strong>
						</p>
						<input class='form-control' data-mask='+999 999 999 999'
							placeholder='+999 999 999 999' type='text'>
						<hr class='hr-normal'>
						<p>
							<strong>Product key (a*-999-a999)</strong>
						</p>
						<input class='form-control' data-mask='a*-999-a999'
							placeholder='a*-999-a999' type='text'>
						<hr class='hr-normal'>
						<p>
							<strong>Date of birth (99/99/9999)</strong>
						</p>
						<input class='form-control' data-mask='99/99/9999'
							placeholder='99/99/9999' type='text'>
						<hr class='hr-normal'>
						<p>
							<strong>Hello</strong>
						</p>
						<input class='form-control' data-mask='aalla' placeholder='aalla'
							type='text'>
					</div>
				</div>
			</div>
			<div class='col-sm-4'>
				<div class='box' style='margin-bottom: 0;'>
					<div class='row'>
						<div class='col-sm-12'>
							<div class='box'>
								<div class='box-header blue-background'>
									<div class='title'>Autosize textarea</div>
									<div class='actions'>
										<a class="btn box-remove btn-xs btn-link" href="#"><i
											class='icon-remove'></i> </a> <a
											class="btn box-collapse btn-xs btn-link" href="#"><i></i>
										</a>
									</div>
								</div>
								<div class='box-content'>
									<textarea class='autosize form-control'
										placeholder='Automatic height based on content' rows='2'></textarea>
								</div>
							</div>
						</div>
					</div>
					<div class='row'>
						<div class='col-sm-12'>
							<div class='box'>
								<div class='box-header purple-background'>
									<div class='title'>Char counter</div>
									<div class='actions'>
										<a class="btn box-remove btn-xs btn-link" href="#"><i
											class='icon-remove'></i> </a> <a
											class="btn box-collapse btn-xs btn-link" href="#"><i></i>
										</a>
									</div>
								</div>
								<div class='box-content'>
									<textarea class='char-counter form-control'
										data-char-allowed='20' data-char-warning='10'
										placeholder='Type some words here...' rows='2'
										style='margin-bottom: 10px;'></textarea>
								</div>
							</div>
						</div>
					</div>
					<div class='row'>
						<div class='col-sm-12'>
							<div class='box' style='margin-bottom: 0;'>
								<div class='box-header green-background'>
									<div class='title'>Max length</div>
									<div class='actions'>
										<a class="btn box-remove btn-xs btn-link" href="#"><i
											class='icon-remove'></i> </a> <a
											class="btn box-collapse btn-xs btn-link" href="#"><i></i>
										</a>
									</div>
								</div>
								<div class='box-content'>
									<textarea class='char-max-length form-control' maxlength='5'
										placeholder='This field has limit of 5 chars' rows='2'
										style='margin-bottom: 0;'></textarea>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<hr class='hr-double'>
		<div class='row'>
			<div class='col-sm-12'>
				<div class='box' style='margin-bottom: 0'>
					<div class='box-header blue-background'>
						<div class='title'>Switch buttons</div>
						<div class='actions'>
							<a class="btn box-remove btn-xs btn-link" href="#"><i
								class='icon-remove'></i> </a> <a
								class="btn box-collapse btn-xs btn-link" href="#"><i></i> </a>
						</div>
					</div>
					<div class='box-content'>
						<div class='row'>
							<div class='col-sm-6'>
								<p>
									<strong>Various sizes</strong>
								</p>
								<div>
									<div class='make-switch switch switch-large'
										data-off-label='&lt;i class="icon-remove"&gt;&lt;/i&gt;'
										data-on-label='&lt;i class="icon-ok"&gt;&lt;/i&gt;'>
										<input type='checkbox'>
									</div>
									<div class='make-switch switch'
										data-off-label='&lt;i class="icon-remove"&gt;&lt;/i&gt;'
										data-on-label='&lt;i class="icon-ok"&gt;&lt;/i&gt;'>
										<input checked='checked' type='checkbox'>
									</div>
									<div class='make-switch switch switch-small'
										data-off-label='&lt;i class="icon-remove"&gt;&lt;/i&gt;'
										data-on-label='&lt;i class="icon-ok"&gt;&lt;/i&gt;'>
										<input type='checkbox'>
									</div>
									<div class='make-switch switch switch-mini'
										data-off-label='&lt;i class="icon-remove"&gt;&lt;/i&gt;'
										data-on-label='&lt;i class="icon-ok"&gt;&lt;/i&gt;'>
										<input checked='checked' type='checkbox'>
									</div>
								</div>
							</div>
							<div class='col-sm-6'>
								<p>
									<strong>Various colors</strong>
								</p>
								<div>
									<div class='make-switch switch'
										data-off-label='&lt;i class="icon-remove"&gt;&lt;/i&gt;'
										data-on-label='&lt;i class="icon-ok"&gt;&lt;/i&gt;'
										data-on='primary'>
										<input checked='checked' type='checkbox'>
									</div>
									<div class='make-switch switch'
										data-off-label='&lt;i class="icon-remove"&gt;&lt;/i&gt;'
										data-on-label='&lt;i class="icon-ok"&gt;&lt;/i&gt;'
										data-on='danger'>
										<input checked='checked' type='checkbox'>
									</div>
									<div class='make-switch switch'
										data-off-label='&lt;i class="icon-remove"&gt;&lt;/i&gt;'
										data-on-label='&lt;i class="icon-ok"&gt;&lt;/i&gt;'
										data-on='success'>
										<input checked='checked' type='checkbox'>
									</div>
									<div class='make-switch switch'
										data-off-label='&lt;i class="icon-remove"&gt;&lt;/i&gt;'
										data-on-label='&lt;i class="icon-ok"&gt;&lt;/i&gt;'
										data-on='warning'>
										<input checked='checked' type='checkbox'>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<hr class='hr-double'>
		<div class='row'>
			<div class='col-sm-6'>
				<div class='box'>
					<div class='box-header purple-background'>
						<div class='title'>(Not serious) Password strength</div>
						<div class='actions'>
							<a class="btn box-remove btn-xs btn-link" href="#"><i
								class='icon-remove'></i> </a> <a
								class="btn box-collapse btn-xs btn-link" href="#"><i></i> </a>
						</div>
					</div>
					<div class='box-content'>
						<p>
							<strong>Type your password and see what happens</strong> (it's
							not serious plugin and it's just for fun :-)
						</p>
						<input class='nakedpassword form-control'
							placeholder='Your top secret password' type='password'>
					</div>
				</div>
			</div>
			<div class='col-sm-6'>
				<div class='box' style='margin-bottom: 0'>
					<div class='box-header orange-background'>
						<div class='title'>Password strength</div>
						<div class='actions'>
							<a class="btn box-remove btn-xs btn-link" href="#"><i
								class='icon-remove'></i> </a> <a
								class="btn box-collapse btn-xs btn-link" href="#"><i></i> </a>
						</div>
					</div>
					<div class='box-content'>
						<p>
							<strong>Type your password and look at progress bar
								below</strong>
						</p>
						<input class='pwstrength form-control'
							placeholder='Your top secret password' type='password'>
					</div>
				</div>
			</div>
		</div>
		<hr class='hr-double'>
		<div class='row'>
			<div class='col-sm-6'>
				<div class='box box-nomargin'>
					<div class='box-header green-background'>
						<div class='title'>Fileinput</div>
						<div class='actions'>
							<a class="btn box-remove btn-xs btn-link" href="#"><i
								class='icon-remove'></i> </a> <a
								class="btn box-collapse btn-xs btn-link" href="#"><i></i> </a>
						</div>
					</div>
					<div class='box-content'>
						<p>
							<strong>Classic file input converted to more user
								friendly</strong>
						</p>
						<div>
							<input title='Search for a file to add' type='file'>
						</div>
					</div>
				</div>
			</div>
			<div class='col-sm-6'>
				<div class='box'>
					<div class='box-header red-background'>
						<div class='title'>Mention</div>
						<div class='actions'>
							<a class="btn box-remove btn-xs btn-link" href="#"><i
								class='icon-remove'></i> </a> <a
								class="btn box-collapse btn-xs btn-link" href="#"><i></i> </a>
						</div>
					</div>
					<div class='box-content'>
						<p>
							<strong>Mention (GitHub style)</strong>
						</p>
						<input class='form-control mention'
							placeholder='Try typing @jenna' style='margin-bottom: 0;'
							type='text'>
					</div>
				</div>
			</div>
		</div>
		<div class='group-header'>
			<div class='row'>
				<div class='col-sm-6 col-sm-offset-3'>
					<div class='text-center'>
						<h2>WYSIWYG</h2>
						<small class='text-muted'>What You See Is What You Get</small>
					</div>
				</div>
			</div>
		</div>
		<div class='row'>
			<div class='col-sm-12'>
				<div class='box'>
					<div class='box-header purple-background'>
						<div class='title'>WYSIWYG Editor</div>
						<div class='actions'>
							<a class="btn box-remove btn-xs btn-link" href="#"><i
								class='icon-remove'></i> </a> <a
								class="btn box-collapse btn-xs btn-link" href="#"><i></i> </a>
						</div>
					</div>
					<div class='box-content'>
						<textarea class='form-control wysihtml5' id='body'
							placeholder='Some text here...' rows='10'>
							<h1>Hello from Flatty!</h1>
						</textarea>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- end form -->


	<?php echo $this->action('index','magazinepublish','administrator');?>



</div>
<!-- end content-wrapper  -->
